/**
 * 固定下拉菜单每个item元素的高度，
 * 高度来源见[class="dropdown-menu-item"]中的[height]样式，单位（rpx）[1rpx=0.5px]，
 * 注：因为CSS渲染中，是以`px`作为单位，
 * 而在JavaScript中设置高度为0，会导致在渲染时解析成1px,
 * 在CSS中，`1px`等于屏幕的`DPI`（每英寸点数）或`DPPX`（每英寸像素）。
 * 如果是在标清显示器上，`1px`可能等于屏幕上的实际`1px`，但在DPI显示器上，这可能会被放大。
 * 解决方案：使用不带单位的数值，故`itemHeight`不能以rpx数值进行计算，
 * 需要height[rpx] / 2后，以px为单位。
 */
const itemHeight = 100 / 2;

Component({
  data: {
    childBoxHeight: 0, // 子元素的高度
    maskVisible: false,
    title: '默认排序',
    dropDownList: [
      { label: '默认排序', value: '1' },
      { label: '价格从高到低', value: '2' },
      { label: '价格从低到高', value: '3' }
    ]
  },
  methods: {
    /**
     * 展示下拉菜单
     */
    dropdownHandle() {
      const { dropDownList, childBoxHeight, maskVisible } = this.data;
      this.setData({
        childBoxHeight: childBoxHeight > 0 ? 0 :  dropDownList.length * itemHeight,
        maskVisible: !maskVisible
      });
    },

    /**
     * 获取选中的item
     * @param {Object} e 
     */
    radioChangeHandle(e) {
      let itemId = e.detail.value;
      let itemName = '';
      this.data.dropDownList.find((item) => {
        if (item.value === itemId) {
          itemName = item.label;
        }
      });
      this.setData({
        title: itemName
      });
      this.dropdownHandle();
    },

    /**
     * 点击遮罩层，隐藏下拉菜单样式
     */
    overlayClickHandle() {
      this.dropdownHandle();
    }
  }
});